<template>
  <view>
    <uv-vtabs
        :chain="false"
        :list="list"
        @change="change"
        :barItemBadgeStyle="{right:'20px',top:'12px'}">
      <uv-vtabs-item>
        <view v-if="list2?.length>0"
              class="item"
              v-for="(item2,index2) in list2"
              :key="index2">
          <view v-if="cur==1">
            <view class="item-title">
              <text class="text">{{ item2.p_name }}</text>
            </view>
          </view>
          <view v-else-if="cur==2" class="cityItem">
              <view class="cityBox">
                  <view class="name">{{ item2.c_name }}</view>
                  <view class="child" v-for="(item,idx) in item2.child">
                    {{item.p_content}}
                  </view>
              </view>
          </view>
        </view>
        <view v-else style="margin-top:40%;">
          <uv-empty mode="page" width="128" height="128" text="无数据"></uv-empty>
        </view>
      </uv-vtabs-item>
    </uv-vtabs>
  </view>
</template>

<script setup>
import {ref} from "vue"

import emptyPng from "@/static/icon/emptyData.png";
import {getLeaderCitys} from "@/common/api";
const list2 = ref([]);
const cateList = ref([])
const cur = ref(0)
const list = ref([{
  name: '我的常用'
}, {
  name: '省直机构'
}, {
  name: '地方领导'
}])
getLeaderCitys().then(r => {
  cateList.value = r.data
})
const change = (index) => {
  cur.value = index
  if(index==1){
    list2.value = cateList.value['shengzhi']
  }else if(index==2){
    list2.value = cateList.value['citys']
  }
}
</script>


<style scoped lang="scss">
.item-title{
  padding:20rpx;
  border-bottom:1px solid #eee;
}
.cityItem{
  border: 1px solid #ddd;
  margin:40rpx;
  padding:20rpx;
  border-radius: 10rpx;
  background: #f5f6f7;
  .name{
    font-weight: bold;
    padding:0 15rpx;
  }
  .child{
    padding:15rpx;
  }
}
</style>
